<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Fnline</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style>
  html {
    overflow: hidden;
  }

  #loading {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgb(251, 251, 251);
  }

  #loading img {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -120px 0 0 -90px;
  }

  #ppt {
    display: none;
  }

  #ppt img {
    position: absolute;
  }

  #contextMenu {
    z-index: 2;
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -122px 0 0 -222px;
    text-align: center;
    width: 444px;
  }

  #contextMenu button {
    width: 130px;
    height: 38px;
    font-size: 16px;
    font-family: "楷体", "宋体", "微软雅黑", "Microsoft Yahei";
    box-shadow: 2px 2px 3px #aaa;
    margin-bottom: 10px;
  }

  #contextMenu div {
    margin: 10px;
  }

  #msg {
    text-align: center;
    display: none;
  }

  #ppt img {
    height: 100px;
    width: 100px;
    opacity: .7;
    filter: alpha(opacity=70);
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
  }

  #ppt img:hover {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  </style>
  <script src="js/fnline.js"></script>
</head>

<body>
  <div id="ppt">
    <img src="images/icons/android-themes-green.ico" alt="">
    <img src="images/icons/angry-birds.ico" alt="">
    <img src="images/icons/athena-hd-template-practice.ico" alt="">
    <img src="images/icons/browser.ico" alt="">
    <img src="images/icons/calculator-green.ico" alt="">
    <img src="images/icons/clock-white.ico" alt="">
    <img src="images/icons/contact.ico" alt="">
    <img src="images/icons/cut-the-rope.ico" alt="">
    <img src="images/icons/delivery.ico" alt="">
    <img src="images/icons/fruit-ninja.ico" alt="">
    <img src="images/icons/gallery-flower.ico" alt="">
    <img src="images/icons/gmail-airpost.ico" alt="">
    <img src="images/icons/google-plus-one.ico" alt="">
    <img src="images/icons/google-plus.ico" alt="">
    <img src="images/icons/ipod-nano-silver.ico" alt="">
    <img src="images/icons/maps-app.ico" alt="">
    <img src="images/icons/market-android.ico" alt="">
    <img src="images/icons/messages-green.ico" alt="">
    <img src="images/icons/music-shuffle.ico" alt="">
    <img src="images/icons/notes-ios.ico" alt="">
    <img src="images/icons/phone-dial.ico" alt="">
    <img src="images/icons/pink-ipod-nano.ico" alt="">
    <img src="images/icons/plants-vs-zombies.ico" alt="">
    <img src="images/icons/playstation-app.ico" alt="">
    <img src="images/icons/settings-app.ico" alt="">
    <img src="images/icons/settings-switch.ico" alt="">
    <img src="images/icons/twitter-app.ico" alt="">
  </div>
  <div id="contextMenu">
      <button>圆</button>
      <button>抛物线</button>
      <button>椭圆</button>
      <button>三角函数</button>
      <button>迪卡尔心形线</button>
      <button>星形线</button>
      <button>三叶玫瑰线</button>
      <button>四叶玫瑰线</button>
      <button>三次曲线</button>
  </div>
  <div id="loading">
    <img src="images/loading.gif">
  </div>
</body>

</html>